<template>
  <div v-if="itemCached" class="feed">
    <Video v-if="showVideo(itemCached)" :url="itemCached.video_path" active ready></Video>
    <PhotoSwiper
      v-else-if="showPhotoOrFallback(itemCached)"
      :item="itemCached"
      :lock="showLockMask(itemCached)"
      active
      ready
      :fullscreen="photoFullscreen"
      @fullscreen="photoFullscreen = true"
      @exit-fullscreen="photoFullscreen = false"
    ></PhotoSwiper>
    <ErrorUnknown v-else></ErrorUnknown>
    <LockMask v-if="showLockMask(itemCached)" show-lock @click:lock="() => $emit('click:lock', item)"></LockMask>
    <div
      class="feature-panel"
      :class="{ 'prevent-event': itemCached.type === MEDIA_TYPE.IMAGE }"
      @click.self="toggleVideoPlay"
      v-show="!videoFullscreen"
    >
      <div class="info gap-col-8" :class="{ landscape: isLandscape }">
        <div class="watch-count font-size-12 font-weight-500 line-height-120">
          <span class="count">{{ toKMBTString(itemCached.share) }}</span>
          {{ $t('info.watches') }}
        </div>
        <div class="content font-size-14 font-weight-400 line-height-140">
          {{ itemCached.content }}
          <br />
          <span
            v-for="tag in itemCached.tags?.split(',').filter((t, i) => i !== 0 || t !== '')"
            class="tag font-weight-500 pointer"
            :key="tag"
          >
            #{{ tag }}
          </span>
        </div>
      </div>
      <transition name="fold">
        <div v-show="isDesktop || isPortrait" class="btns gap-col-24">
          <div v-if="itemCached.type === MEDIA_TYPE.VIDEO" class="mute pointer">
            <Icon v-if="videoMuted" size="24" shadow @click="toggleVideoMuted" name="mute"></Icon>
            <Icon v-else size="24" shadow @click="toggleVideoMuted" name="unmute"></Icon>
          </div>
          <div class="fullscreen pointer" @click="enterFullscreen(itemCached)">
            <Icon v-if="isFullscreenIcon(itemCached)" size="24" shadow name="fullscreen"></Icon>
            <Icon v-else size="24" shadow name="multiPhoto"></Icon>
          </div>
          <LikeButton
            class="like pointer"
            :id="itemCached.id"
            :aff="itemCached.author.aff"
            :is-like="itemCached.liked"
            :like-count="itemCached.like"
          ></LikeButton>
          <div class="chat pointer" @click="openChatPanel(itemCached)">
            <Icon size="36" shadow name="chatBold"></Icon>
            <span class="font-size-12 font-weight-500">{{ toKMBTString(itemCached.comment) }}</span>
          </div>
          <div class="share pointer" @click="shareLink(itemCached)">
            <Icon size="36" shadow name="shareBold"></Icon>
          </div>
        </div>
      </transition>
      <VideoTimeBarController v-if="showVideo(itemCached)" :active="active"></VideoTimeBarController>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { whenever } from '@vueuse/core'
import { storeToRefs } from 'pinia'
import { useAppStore } from '@/store/app'
import { useChatPanelStore } from '@/store/chat-panel'
import { useFeedStore } from '@/store/feed'
import { isFullscreenIcon, showLockMask, showPhoto, showPhotoOrFallback, showVideo } from '@/utils/feed-status'
import { toKMBTString } from '@/utils/string-helper'
import PhotoSwiper from '@/components/multimedia/PhotoSwiper.vue'
import Video from '@/components/multimedia/Video.vue'
import LikeButton from '@/components/viewer/stateful/LikeButton.vue'
import { useCopyToClipboard } from '@/compositions/utils/copyToClipboard'
import { MEDIA_TYPE } from '@/constant/publish'
import LockMask from '../viewer/LockMask.vue'
import VideoTimeBarController from '../viewer/VideoTimeBarController.vue'
import ErrorUnknown from './ErrorUnknown.vue'

const props = defineProps({
  item: { type: Object },
  active: { type: Boolean, default: false },
})

defineEmits(['click:lock'])

const feedStore = useFeedStore()
const { getFeed } = feedStore
const itemCached = ref(null)

whenever(
  () => props.item,
  async (v) => (itemCached.value = await getFeed(v.id)),
)

const photoFullscreen = ref(false)

const appStore = useAppStore()
const { isDesktop, isPortrait, isLandscape, videoMuted, videoFullscreen } = storeToRefs(appStore)
const { toggleVideoPlay, toggleVideoMuted, toggleVideoFullscreen } = appStore

const chatPanelStore = useChatPanelStore()
const { open: openChatPanel } = chatPanelStore

const { copy } = useCopyToClipboard()
function shareLink(item) {
  copy(item.share_url)
}

function enterFullscreen(item) {
  showVideo(item) && toggleVideoFullscreen(true)
  showPhoto(item) && (photoFullscreen.value = true)
}
</script>

<style lang="scss" scoped>
.fold-enter-active,
.fold-leave-active {
  transition: transform 0.3s ease-in;
}
.fold-enter-from,
.fold-leave-to {
  transform: translateX(4rem);
}

.feed {
  width: 100%;
  height: 100%;

  .feature-panel {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background: linear-gradient(
      to bottom,
      rgba(65, 65, 65, 0.46) 0%,
      rgba(65, 65, 65, 0) 18.3%,
      rgba(65, 65, 65, 0) 66.5%,
      rgba(65, 65, 65, 0.43) 100%
    );

    &.prevent-event {
      pointer-events: none;
    }

    .info {
      pointer-events: initial;
      width: calc(100% - 1rem - 5rem);
      position: absolute;
      left: 1rem;
      bottom: 6.125rem;

      &.landscape {
        bottom: 0.5rem;
      }

      .watch-count {
        .count {
          margin-right: 0.3125rem;
        }
      }
      .content {
        letter-spacing: 0.2px;

        .tag {
          margin-right: 0.375rem;
        }
      }
    }

    .btns {
      pointer-events: initial;
      width: 3rem;
      position: absolute;
      right: 1rem;
      bottom: 6.1875rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .mute,
      .fullscreen {
        width: 1.5rem;
        height: 1.5rem;
      }

      .like,
      .chat {
        width: 2.5rem;
        height: 3.5rem;
        text-align: center;
      }
    }
  }
}
</style>
